<template>
  <div>
    <div class="table-title">
      <span>{{ tabTitle }}</span>
      <el-button type="primary" plain size="small" @click="">导入</el-button>
    </div>

    <div class="table-container">
      <div class="select-box">
        <div class="select-row">
          <span class="text">姓名</span>
          <el-input v-model="teacherName" :size="formSize" class="form-width" placeholder="请输入" />
        </div>
        <el-button type="primary" size="small" @click="getTeacherList">查询</el-button>
      </div>

      <el-table
        :data="teacherList"
        border
        stripe
        size="mini"
        max-height="600px"
        style="width: 100%; margin-top: 20px;">
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="name" label="教师"></el-table-column>
        <el-table-column prop="createDate" label="照片">
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="picUrl+scope.row.pic"
              fit="cover"
              :preview-src-list="[picUrl+scope.row.pic]" />
          </template>
        </el-table-column>
        <el-table-column prop="leader" label="是否为班主任">
          <template slot-scope="scope">
            <el-tag size="small" type="success" v-if="scope.row.leader == 1">是</el-tag>
            <el-tag size="small" type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="addFaceInfo(scope.row)">添加人脸照片</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>

    <UploadFileModel ref="uploadFileModelRef" />
  </div>
</template>

<script>
import Pagination from "@/components/pagination/Pagination";
import UploadFileModel from "./UploadFileModel";
import httpConfig from "@/utils/httpConfig"
import httpInterface from "../../utils/httpInterface";
import { errorMessage, successMessage } from "../../utils/validate";

export default {
  name: "StudentList",
  components: { Pagination, UploadFileModel },
  data() {
    return {
      teacherList: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      formSize: "small",
      teacherName: "",
      picUrl:''
    }
  },
  props: {
    tabTitle: String
  },

  computed: {},

  created() {
    this.picUrl = httpConfig.serverUrl
  },

  mounted() {
    this.teacherName = "";
  },

  methods: {
    indexMethod(index) {
      return index + 1;
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.getTeacherList();
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.getTeacherList();
    },

    addFaceInfo(row) {
      this.$refs.uploadFileModelRef.showDialog(row.id);
    },

    getTeacherList() {
      let { pageData, teacherName } = this;
      let params = {
        page: pageData.pageNum,
        size: pageData.pageSize,
      };
      if (teacherName) {
        params.teacherName = teacherName;
      }
      httpInterface.requestPost(httpInterface.URL_TEACHER_LIST, params, res => {
        let { code, body } = res.data;
        if (code == 200) {
          console.log(body)
          this.teacherList = body.rows;
          this.pageData.total = Number(body.total);
        } else {
          errorMessage("老师数据加载失败！");
        }
      }, null, true)
    }
  }
}
</script>

<style scoped lang="scss">
.table-title {
  margin-top: -5px;
}

.table-container{
  margin-top: 20px;

  .select-box {
    display: flex;

    .select-row{
      margin-right: 20px;

      .text{
        font-size: 14px;
        color: #333333;
        margin-right: 6px;
      }

      .form-width{
        width: 180px;
      }
    }
  }
}

.el-table--border >>> .el-table__row td:nth-child(3) .cell {
  line-height: normal;
}
</style>
